<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构默认值实现配置项合并</title>
</head>
<body>
    
</body>
<script>
    /*
        解构赋值语法：
            等号左边和又变的数据类型要一样  只有一样的才能够进行解构 常常用于解构数组和对象

            解构也是可以传递默认参数的
    */
    // 解构数组
    let [a,b,c] = [1,2]
    console.log(a,b)  //1,2
    console.log(c) //underfined

    let [i,j,q = 7] = [5,6]
    console.log(i,j,q)  // 5 6 7  
    // 在解构中我们可以默认的给参数传递默认值  如果要解构的对象真的有这个参数  那么就能够将那个数解构出来
        // 如果解构的数组或对象没有这个成员  那么就会用这个默认值显示

    // 案例  动态的生成一个div
    function creatElemnt(option){
        // 因为解构赋值这里使用默认值 所以默认值和属性之间是使用 = 相连的 并不是像对象一样使用:来绑定值
        let {
            width=100,
            height=100,
            backgroundColor='red'
        } = option
        let div = document.createElement('div')
        div.style.width = width + 'px'
        div.style.height = height + 'px'
        div.style.backgroundColor = backgroundColor
        document.body.appendChild(div)
    }
    creatElemnt({width:200,backgroundColor:'#bfa'})
</script>
</html>